<script setup lang="ts">
import { bgmToggle, bgmVolume, bgmList, bgm } from '@/assets/global.ts'
</script>

<template>
  <div class="bgm-setting">
    <a-row class="bgm-setting-row">
      <a-col :span="4">
        背景音乐
      </a-col>
      <a-col :span="12">
        <a-switch
          v-model:checked="bgmToggle"
          :checked-children="'开'"
          :un-checked-children="'关'"
        ></a-switch>
      </a-col>
    </a-row>
    <a-row class="bgm-setting-row">
      <a-col :span="4">
        音量
      </a-col>
      <a-col :span="8">
        <a-slider v-model:value="bgmVolume" :min="0" :max="1" :step="0.01"/>
      </a-col>
      <a-col :span="4">{{bgmVolume}}</a-col>
    </a-row>
    <a-row class="bgm-setting-row">
      <a-col :span="4">
        选择音乐
      </a-col>
      <a-col :span="12">
        <a-select
          ref="select"
          v-model:value="bgm"
          style="width: 100%"
        >
          <a-select-option v-for="item in bgmList" :key="item.src">{{item.name}}</a-select-option>
        </a-select>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.bgm-setting {
  font-weight: bold;
}

.bgm-setting-row + .bgm-setting-row {
  margin-top: 8px;
}

:deep(.ant-select-selector) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

:deep(.ant-row) {
  align-items: center;
}
</style>